<template>
	<uni-popup ref="popUp" :mask-click="maskClick" @close="close" @change="changeStaus" :type="type">
		<view class="reason_s" :style="{ width: widthS }">
			<!-- <view class="imgBox">
				
			</view> -->
			<view class="header_s">
				<image src="@/static/images/close_btn.png" @click="close" v-if="showCloseIcon"></image>
				<view v-if="showTitle">{{ title }}</view>
			</view>
			<view class="content_s">
				<slot></slot>
			</view>
			<view class="bottom_s" v-if="showBottom">
				<block v-if="changeComfire">
					<view class="cancle_s" @click="confirem">{{ comfireTxt }}</view>
					<view class="comfire_s" @click="cancle">{{ cancleTxt }}</view>
				</block>
				<block v-else>
					<view class="cancle_s" @click="cancle">{{ cancleTxt }}</view>
					<view class="comfire_s" @click="confirem">{{ comfireTxt }}</view>
				</block>

			</view>
		</view>
	</uni-popup>
</template>

<script>
// import unipopup from '@/components/uni-popup/uni-popup';
export default {
	props: {
		maskClick: {
			type: Boolean,
			default: true
		},
		type: {
			type: String,
			default: 'center'
		},
		visible: {
			type: Boolean
		},
		showBottom: {
			type: Boolean,
			default: true
		},
		cancleTxt: {
			type: String,
			default: '取消'
		},
		comfireTxt: {
			type: String,
			default: '确定'
		},
		title: {
			type: String,
		},
		widthS: {
			type: [String, Number],
			default: '500rpx'

		},
		// 样式调整
		isChange: {
			type: Boolean,
			default: true
		},
		// 更换按钮位置
		changeComfire: {
			type: Boolean,
			default: false
		},
		// 是否展示标题
		showTitle:{
			type:Boolean,
			default:true
		},
		// 是否展示x关闭
		showCloseIcon:{
			type:Boolean,
			default:true

		}
	},
	data() {
		return {

		};
	},
	watch: {
		visible(newValue) {
			if (newValue === true) {
				this.$refs.popUp.open();
			} else {
				this.$refs.popUp.close();
			}
		}
	},
	methods: {
		changeStaus(res) {
			console.log('changeStaus',res);
			if (res.show == false) {
				this.close();
			}
		},
		close() {
			this.$emit('close');
		},
		cancle() {
			this.$emit('cancle');
		},
		confirem() {
			this.$emit('comfire');
		}
	},
};
</script>

<style lang="scss" scoped>
.reason_s {
	width: 500rpx;
	// height: 670rpx;
	background-color: #fff;
	border-radius: 16rpx;
	position: relative;

	.header_s {
		padding-top: 40rpx;
		padding-bottom: 30rpx;
		display: flex;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bold;
		position: relative;

		image {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: 20rpx;
			right:20rpx;
		}
	}
}

.content_s {
	padding: 0 28rpx;
}

.bottom_s {
	border-top: 2rpx solid #e9e9e9;
	margin-top: 18rpx;
	// position: fixed;
	// bottom: 0;
	display: flex;

	view {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		font-size: 28rpx;
	}

	.cancle_s {
		color: #999999;
		border-right: 2rpx solid #f5f5f5;
	}

	.comfire_s {
		color: #0091ff;
	}
}
</style>
